/**
 * 高阶组件的使用
 * 关于高阶组件本质上就是一个对于组件的代理
 * 对组件渲染过程中间的一个过程
 * 这个过程中，我们可以对props操作，对模板操作
 */
import React from "react";
import {
  AlbumDetailsContent,
  AlbumDetailsCover,
  AlbumDetailsInfo,
  AlbumDetailsSidebar
} from "./childrenPages/albumDetails/Index";
import {
  MusicDetailsContent,
  MusicDetailsCover,
  MusicDetailsInfo,
  MusicDetailsSidebar
} from "./childrenPages/musicDetails/Index";
import {
  SongSheetDetailsContent, SongSheetDetailsCover,
  SongSheetDetailsInfo,
  SongSheetDetailsSidebar
} from "./childrenPages/songSheetDetails/Index";
import {
  SingerDetailsContent,
  SingerDetailsCover,
  SingerDetailsInfo,
  SingerDetailsSidebar
} from "./childrenPages/singerDetails/Index";
import {getUserDetailsByIdApi} from "../../services/user";
//歌曲类型
type MusicType = {
  //专辑名称
  album?: string,
  //语种
  languagesType?: string,
  //唱片公司
  company?: string,
  //发布时间
  sendTimer?: number,
}
//歌单类型
type SongSheetType = {
  //标签列表
  labelList?: Array<any>,
  playNumber?: number,
  collectNumber?: number
}
//专辑类型
type AlbumType = {
  //语种
  languagesType?: string,
  //发布时间
  sendTimer?: number,
  //唱片公司
  company?: string,
}


/**
 *
 * @param WrapperComponent 组件
 * @param type 类型
 * @constructor
 */
export function Enhance(WrapperComponent: any, type: number, id: number) {
  //根据type渲染不同的组件
  // type=1 表示歌曲详情页
  // type=2 表示歌单详情页
  // type=3 表示专辑详情页
  // type=4 表示歌手详情页
  function getComponentByType(): Array<JSX.Element>{
    switch (type) {
      case 1: {
        return [<MusicDetailsCover id={id}/>, <MusicDetailsInfo id={id}/>, <MusicDetailsContent id={id}/>, <MusicDetailsSidebar id={id}/>];
      }
      case 2: {
        return [<SongSheetDetailsCover id={id}/>,<SongSheetDetailsInfo id={id}/>, <SongSheetDetailsContent id={id}/>, <SongSheetDetailsSidebar id={id}/>];
      }
      case 3: {
        return [<AlbumDetailsCover id={id}/>, <AlbumDetailsInfo id={id}/>, <AlbumDetailsContent id={id}/>, <AlbumDetailsSidebar id={id}/>];
      }
      case 4: {
        return [<SingerDetailsCover id={id}/>,<SingerDetailsInfo id={id}/>, <SingerDetailsContent id={id}/>, <SingerDetailsSidebar id={id}/>];
      }
      default: {
        return [];
      }
    }
  }

  return (props?: SongSheetType | MusicType | AlbumType) => {
    // 先把以前组件的props展开，然后再写我们添加的props
    // coverImageUrl应该如何传递???
    //主要矛盾为 子传父
    const componentList= getComponentByType();
    return <WrapperComponent
      id={id}
      isShowCover={type === 3}
      isRadius={type === 4}
      coverSlot={componentList[0]}
      infoSlot={componentList[1]}
      contentSlot={componentList[2]}
      sidebarSlot={componentList[3]}
      {...props}/>
  }
}
